<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新建子系统</title>
</head>
<body>
    <div th:fragment="main" id="addSubSystem" class="addSubSystem">
        <style>
            .content {
                position: relative;
                width: auto;
            }
            .addSubSystem {
                margin: 5px;
                padding: 0 15px;
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                background-color: #fff;
                border: 1px solid #eaeaea;
                border-radius: 5px;
                overflow: auto;
            }
            .addSubSystem .title {
                padding: 18px 0px 10px;
                height: 65px;
                border-bottom: 1px solid #DDD;
                font-size: 14px;
            }
            .addSubSystem .title .title-content {
                margin: 0;
                padding: 5px 10px;
                list-style: none;
                color: #000;
                background-color: #fff;
                border-radius: 0;
                border-left: 2px solid #88B7E0; 
            }
            .addSubSystem .title .title-content li>a {
                color: #000;
            }
            .addSubSystem .title .title-content li>a:hover {
                color: #88B7E0;
            }

            .subSystem-add {
                margin-top: 40px;
                font-size: 14px;
            }
            .subSystem-add .form-group {
                margin-bottom: 30px;
            }
            .subSystem-add .footer {
                margin-top: 35px;
            }
            .subSystem-add .save {
                margin-right: 10px;
            }

            .form-control[readonly] {
                background-color: #fff;
            }
            /*返回按钮  */
            .back { 
                display: inline-block;
                float: right;
                position: relative;
                margin-right: 10px; 
                width: 40px; 
                height: 28px; 
                line-height: 28px; 
                text-align: center; 
                color: #fff;
                background: #337ab7; 
                border: 1px solid #337ab7; 
                border-left: none;
                border-radius: 5px;  
            }
            #fileupload {
				display: none;
			}
            .back:after{ 
                position: absolute; 
                content: " "; 
                border: transparent 13px solid;  
                border-width:  12px 8px; 
                border-right-color: #337ab7; 
                top: 1px; 
                left: -15px; 
                height: 0; 
                width: 0; 
            }
            .back:hover {
                background: #286090; 
            }
            .back:hover:after {
                border-right-color: #286090;
            }
        </style>
        <div class="title">
            <ol class="breadcrumb title-content">
                <li><a href="#platform-subSystemGroup-subSystem">子系统管理</a></li>
                <li>新建子系统</li>
                <a href="#platform-subSystemGroup-subSystem" class="back">返回</a>
            </ol>
            
        </div>
         <div class="subSystem-add">
            <form action="" class="form-horizontal col-xs-offset-2" id="add_form">
                <div class="form-group">
                    <label for="subSystem-name" class="col-sm-3 control-label">子系统名称:</label>
                    <div class="col-sm-5">
                        <input name="subSystem-name" id="subSystem-name" type="text" class="form-control input-sm">
                    </div>
                </div>
                <div class="form-group">
                    <label for="subSystem-description" class="col-sm-3 control-label">子系统描述:</label>
                    <div class="col-sm-5 ckeditor">
                        <textarea name="subSystem-description" id="subSystem-description" class="form-control" rows="5" placeholder="描述内容不超过500字"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label for="subSystem-vendor" class="col-sm-3 control-label">生产厂商:</label>
                    <div class="col-sm-5">
                        <input name="subSystem-vendor" id="subSystem-vendor" type="text" class="form-control input-sm">
                    </div>
                </div>
                <div class="form-group">
                    <label for="subSystem-type" class="col-sm-3 control-label">系统类型:</label>
                    <div class="col-sm-5 ckeditor">
                        <textarea name="subSystem-type" id="subSystem-type" class="form-control" rows="1" placeholder="描述内容不超过100字"></textarea>
                    </div>
                </div>
                <div class="form-group">
                <label for="subSystem-loginType" class="col-sm-3 control-label">登录类型:</label>
                <div class="col-sm-5 control-div">
                	<select for="subSystem-loginType" id='subSystem-loginType' class="form-control">
                    <option value="1">CAS鉴权</option>
                    <option value="2">URL鉴权</option>
                	</select>
                </div>
                </div>
                <div class="form-group">
                    <label for="subSystem-loginUrl" class="col-sm-3 control-label">登录URL:</label>
                    <div class="col-sm-5 ckeditor">
                        <textarea name="subSystem-loginUrl" id="subSystem-loginUrl" class="form-control" rows="1" placeholder="URL鉴权时必填"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label for="subSystem-mainUrl" class="col-sm-3 control-label">首页URL:</label>
                    <div class="col-sm-5 ckeditor">
                        <textarea name="subSystem-mainUrl" id="subSystem-mainUrl" class="form-control" rows="1" placeholder="URL鉴权时必填"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label for="subSystem-loginUserNameField" class="col-sm-3 control-label">登录用户名:</label>
                    <div class="col-sm-5 ckeditor">
                        <textarea name="subSystem-loginUserNameField" id="subSystem-loginUserNameField" class="form-control" rows="1" placeholder="URL鉴权时必填"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label for="subSystem-loginPasswordField" class="col-sm-3 control-label">登录密码:</label>
                    <div class="col-sm-5 ckeditor">
                        <textarea name="subSystem-loginPasswordField" id="subSystem-loginPasswordField" class="form-control" rows="1" placeholder="URL鉴权时必填"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label for="subSystem-icoUrl" class="col-sm-3 control-label">系统图片：</label>
                    <div id="subSystem-icoUrl" class="col-sm-5 ckeditor">
                        <a  id="btnUpload" onclick="appFile()">
                        	<input type="button" value="上传图片" class="btn btn-default upload" id="upload">
                        </a>
                        <div id="uploads"></div>
                    </div>
                </div>
                <div>
                <center><img id=ico src="" height="100" width="100"></center>
                
                </div>
                <div class="form-group footer">
                    <div class="col-xs-8">
                        <input type="button" value="清空" class="btn btn-default pull-right cancel" id="cancel">
                        <input type="button" value="保存" class="btn btn-primary pull-right save" id="save">
                    </div>                          
                </div>
                <input id="fileupload" accept="" type="file" name="file" data-url=contextPath + "/file/uploadImage" multiple="multiple">
            </form>
        </div> 
        
        
        <script th:src="@{/assets/jquery/plugins/jquery.ui.widget.js}"></script>
		<script th:src="@{/assets/jquery/plugins/jquery.iframe-transport.js}"></script>
		<script th:src="@{/assets/jquery/plugins/jquery.fileupload.js}" type="text/javascript"></script>
		
		
        <script>
            var data;
            // textarea高度根据内容自适应
            $.fn.extend({
                txtaAutoHeight: function () {
                    return this.each(function () {
                        var $this = $(this);
                        if (!$this.attr('initAttrH')) {
                            $this.attr('initAttrH', $this.outerHeight());
                        }
                        setAutoHeight(this).on('input', function () {
                            setAutoHeight(this);
                        });
                    });
                    function setAutoHeight(elem) {
                        var $obj = $(elem);
                        return $obj.css({ height: $obj.attr('initAttrH'), 'overflow-y': 'hidden' }).height(elem.scrollHeight);
                    }
                }
            });
            $(function () {
                $("#message").txtaAutoHeight();
            });
            //上传图片
            function appFile(){
				var upFiles = $(".upfile");
				
				//获取选择的 img.attr
				upFiles.each(function(index,element){
					console.log($(element).attr('attr'));
				});
				
				if(upFiles.length == 1){
					toastr.error("只能上传一个图片 ！", "图片上传");
				}else{
					$('input[id=fileupload]').click();
				}
			}
            $('#fileupload').fileupload({
				singleFileUploads : true,
				dataType : 'json',	
				done : function(e, data) {
					if (data.result.code == 1) {
						console.log(data.result.data)
						var filepath = data.result.data;
						/* uploadFiles.forEach(function(filepath) { */
							var imageStr = "<div class='upfile'><div class='fileName'><i class='fa fa-paperclip uploadIcon'></i>" 
											+ filepath.upFileName + "(" + filepath.fileSize + ")" 
											+ "<a attr='"+ filepath.deletePath 
											+"'class='delfileButton' onclick='deleteImg(this)' >&nbsp;[删除]</a></div></div>";
							$("#uploads").append(imageStr);
							/* imagepaths.push(filepath.serverPath); */
						/* }) */
					} else {
						alert(data.result.data);
					}
					console.log(data.result);
					$('#ico').attr("src", data.result.data.downPath);
					$('#subSystem-icoUrl').attr("data-downpath", data.result.data.downPath);
				}
			});
          //删除选择的图片
			function deleteImg(obj){
				var url = $(obj).attr('attr');
				$('#ico').attr("src", "");
				$.ajax({
					type : 'get',
					url : url,
					contentType: "application/json",
					success : function(data) {
						toastr['success']("成功！", "删除");
						$(obj).parent().parent().parent().remove();
						console.log(data)
					},
		            error: function (error) {
		                toastr['error']("失败！", "加载界面");
		                console.log(error);
		            }
				});
			}
            // 新建
           $('#save').on('click',function(){
        	   	
        	   
            	if($("#subSystem-name").val().length == 0){
            		toastr.error("子系统名称不得为空！");
            		return;
            	}else{
            		if($("#subSystem-loginType").val() == 2){
            			if($("#subSystem-loginUrl").val().length == 0 || $("#subSystem-mainUrl").val().length == 0 || $("#subSystem-loginUserNameField").val().length == 0 || $("#subSystem-loginPasswordField").val().length == 0){
            				toastr.error("请输入完整URL鉴权相关信息！");
            				return;
            			}
            		}
            	}
        				var formData = {
        						"description": $("#subSystem-description").val(),
        	                    "name": $("#subSystem-name").val(),
        	                    "vendor":$("#subSystem-vendor").val(),
        	                    "type":$("#subSystem-type").val(),
        	                    "loginType":$("#subSystem-loginType").val(),
        	                    "loginUrl":$("#subSystem-loginUrl").val(),
        	                    "mainUrl":$("#subSystem-mainUrl").val(),
        	                    "loginUserNameField":$("#subSystem-loginUserNameField").val(),
        	                    "loginPasswordField":$("#subSystem-loginPasswordField").val(),
        	                    "icoUrl":$("#subSystem-icoUrl").attr("data-downpath"),
        					}
        				
        				$.ajax({
                            url: contextPath + '/SubSystem/createSubSystem',
                            type: 'POST',
                            data: JSON.stringify(formData),
                            cache : false,
                            contentType: "application/json",
                            success: function (D) {
                            	toastr.success("新建子系统，保存成功!");
                            	location.hash = "platform-subSystemGroup-subSystem";
                            },
                            error: function (D) {
                                toastr.error("操作失败，请稍后再试!");
                            }
                        });
        	   	});
                
                
                   
			

            // 取消
            $('#cancel').on('click',function(){
				$('#add_form')[0].reset();
			});
        </script>
    </div>
</body>
</html>